<%--
  Created by IntelliJ IDEA.
  User: sxjzit001
  Date: 2023/5/11
  Time: 19:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <title>学生管理</title>
    <style >
      ul{
        text-decoration: none;
        list-style: none;
      }
      .newStu{
        margin-left: 750px;
      }
      input{
        width: 200px;
      }
      label{
        display: inline-block;
        width: 200px;
      }
    </style>
  <script>
    const baseUrl = "http://localhost:8081/StuManager/"
    const EDIT_STR = "编辑"
    const SUBMIT_STR = "提交"
    $(function () {
      axios.get(baseUrl+"login/StuMangerServlet?action=queryAllStu")
              .then(function (response) {
                console.log(response)
                let stuList = response.data
                for (let i = 0; i < stuList.length; i++) {
                  let item = stuList[i]
                  let liItem = '<li><div> <input type="hidden" class="hId" value="'+item.id+'" >' +
                          '<input class="sno" type="text" disabled  value="'+item.sno+'"/>' +
                          '<input class="name" type="text"  disabled value="'+item.name+'"/>' +
                          '<input class="sex" type="text" disabled value="'+item.sex+'"/>' +
                          '<input class="phone" type="number"  disabled value="'+item.phone+'"/>' +
                          '<button class="edit">编辑</button>' +
                          '<button class="delete">删除</button></div></li>'
                  $(".stuList").append(liItem)
                }
              }).then(function (){
                // 在拉取到学生列表后,创建出页面标签后再给创建出的编辑按钮绑定单击事件
                $(".edit").click(function () {
                  // 这里的this 指向触发该点击事件的按钮
                  console.log("点击的是这一行",$(this).parent()[0])
                  let liChild = $(this).parent().children();
                  if ($(this).html() === SUBMIT_STR){
                    // 将编辑框变成不可编辑的状态, 将按钮变成 编辑
                    $(liChild).filter("input").attr("disabled", true)
                    $(this).html(EDIT_STR)
                    // 获取编辑框中的数据并提交
                    let id = $(liChild[0]).val();
                    let sno = $(liChild[1]).val();
                    let name = $(liChild[2]).val();
                    let sex = $(liChild[3]).val();
                    let phone = $(liChild[4]).val();
                    console.log(id, sno, name, sex, phone)
                    // post请求服务器, 发送ajax请求
                    let params = "id="+id+"&sno="+sno+"&name="+name+"&sex="+sex+"&phone="+phone
                    axios.post(baseUrl+"login/StuMangerServlet?action=editStu",params)
                            .then(function (response) {
                              let editResult = response.data
                              // 根据修改结果提示用户  修改成功还是修改失败
                              // if (editResult.code === 20) {
                              //   // 成功
                              //   alert(editResult.msg)
                              // }
                              alert(editResult.msg)
                    })
                  }else if ($(this).html() === EDIT_STR) {
                    // 校验有没有未提交的修改,如果有,则阻止修改, 将之前未提交的修改提交后才能提交
                    let hasNoSubmit = false;
                    for (let i = 0; i <$(".edit").length; i++) {
                      if($($(".edit")[i]).html()=== SUBMIT_STR){
                        hasNoSubmit = true
                        break;
                      }
                    }
                    if (hasNoSubmit){
                      alert("请先把已修改的数据提交后再修改")
                      return
                    }
                    // 将按钮变成 提交 ;并将编辑框修改成可可编辑状态
                    $(this).html(SUBMIT_STR)
                    liChild.removeAttr("disabled")
                  }
                })
              })
      $(".newStu").click(function (){
        alert("new")
      })
    })
  </script>
</head>
<body>

  <h1>学生管理</h1>
  <button class="newStu">新增</button>

  <ul class="stuList">
    <li>
      <div>
        <label >学号</label>
        <label >姓名</label>
        <label >性别</label>
        <label >电话</label>
      </div>
    </li>
  </ul>
</body>
</html>
